<script setup lang="ts">
  import Header from './components/Header.vue'
  import routeComponentName from '@/config/route-component-name'
  // import SendRepairInfo from './components/SendRepairInfo.vue'
  import CustomerInfo from './components/CustomerInfo.vue'
  import DetectInfo from './components/DetectInfo.vue'
  import DetectionList from './components/detection-list/Index.vue'
  import { useGetDetectDetail } from '@/services/pages/return-factory/useReturnFactory'
  import { useRoute } from 'vue-router'
  import { onMounted, ref } from 'vue'

  const { detail, getDetailLoading, getDetail } = useGetDetectDetail()

  defineOptions({
    name: routeComponentName.returnFactory.detectDetail,
  })

  // 激活路由对象
  const route = useRoute()

  // 检测信息组件实例
  const detectInfoInstance = ref<InstanceType<typeof DetectInfo> | null>(null)

  // 检测清单组件实例
  const detectListInstance = ref<InstanceType<typeof DetectionList> | null>(null)

  /**
   * 获取详情
   */
  const _getDetail = () => {
    if (route.params.id) {
      getDetail(route.params.id as string)
    }
  }

  /**
   * 获取检测清单
   */
  const getDetectGoodList = () => {
    if (detectListInstance.value && route.params.id) {
      detectListInstance.value.getGoodList(route.params.id as string)
    }
  }

  /**
   * 获取检测自定义字段
   */
  const getDetectCustomField = () => {
    if (detectInfoInstance.value) {
      detectInfoInstance.value.getCustomField(route.params.id as string)
    }
  }

  onMounted(() => {
    _getDetail()
    getDetectCustomField()
    getDetectGoodList()
  })
</script>

<template>
  <div v-loading="getDetailLoading" class="return-factory-detect-detail-wrapper">
    <div class="return-factory-detect-detail">
      <Header :detail="detail" />
      <div class="divider"></div>
      <div class="main">
        <div class="customer-send-repair-info">
          <customer-info :detail="detail" />
          <detect-info ref="detectInfoInstance" :detail="detail" />
          <!-- <send-repair-info :detail="detail" /> -->
        </div>
        <!-- <div class="detect-info"> -->
        <!-- </div> -->
        <div class="detection-list">
          <detection-list ref="detectListInstance" :detail="detail" @update="_getDetail" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .return-factory-detect-detail-wrapper {
    height: calc(100vh - 92px);
    width: 100%;
    box-sizing: border-box;
    padding: 12px;

    .return-factory-detect-detail {
      background-color: #fff;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 12px;

      .divider {
        border-bottom: 1px dotted #e5e5e5;
        margin: 12px 0;
      }

      .main {
        display: flex;
        flex-direction: column;
        row-gap: 48px;

        .customer-send-repair-info {
          display: flex;
          column-gap: 72px;
        }

        .detect-info,
        .detection-list,
        .customer-send-repair-info {
          box-sizing: border-box;
          padding: 0 12px;
        }
      }
    }
  }
</style>
